<template>
  <div class="upload-item">
    <div  class="image">
      <!-- 工具 -->
      <div class="action select-none flex-center" @click.stop>
        <!-- 预览 -->
        <el-icon @click.stop="">
          <zoom-in />
        </el-icon>

        <!-- 删除 -->
        <el-icon @click.stop="">
          <delete />
        </el-icon>
      </div>
      <el-image :src="data" class="img" fit="contain"></el-image>
    </div>

    <!-- 上传进度 -->
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ZoomIn, Delete } from '@element-plus/icons-vue'

interface Props {
  data: string
}

const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
.upload-item {
  height: 100%;
  position: relative;
  border-radius: 5px;
  background-color: #f5f7fa;
  cursor: pointer;
  overflow: hidden;
  margin-right: 8px;
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .action {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    z-index: 9;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    &:hover {
      opacity: 1;
    }

    .el-icon {
      color: #fff;
      font-size: 18px;
      margin: 0 8px;

      &:hover {
        color: #0ea5e9;
      }
    }
  }
  .image, .img {
    width: 100%;
    height: 100%;
  }
}
</style>
